<template>
  <div id="">
    <headerbox :hasBack='true'></headerbox>
    <headerTab :headerArr="headerArr" @tabEvent="tabEvent"></headerTab>
    <!-- 我申请的 -->
    <div class="" v-if="idx==0">
      <noneList v-if="toFriend.length<1" :noneTxt="'还未有新朋友哦~'"></noneList>
      <ul class="formList" v-else>
        <li v-for="user in toFriend" :key="user.key" class="justify-content">
            <span>{{user.passiveApplyUser}}</span>
            <!-- applyType:0 待操作 1已同意（添加好友关系） 2 已拒绝 -->
            <div class="btnSpan" v-if="user.applyType==0">
              <span>待通过</span>
            </div>
            <div v-if="user.applyType==1">
              <span>已同意</span>
            </div>
            <div class="btnSpan" v-if="user.applyType==2">
              <span>已拒绝</span>
            </div>
        </li>
      </ul>
    </div>
    <!-- 申请我的 -->
    <div class="" v-else>
      <noneList v-if="friendTo.length<1" :noneTxt="'还未有新朋友哦~'"></noneList>
      <ul class="formList" v-else>
        <li v-for="user in friendTo" :key="user.key" class="justify-content">
          <span>{{user.applyUser}}</span>
          <!-- applyType:0 待操作 1已同意（添加好友关系） 2 已拒绝 -->
          <div class="btnSpan" v-if="user.applyType==0">
            <span @click="agreeApply(user.id)">同意</span>
            <span @click="operApply(user.id)">拒绝</span>
          </div>
          <div v-if="user.applyType==1">
            <span>已同意</span>
          </div>
          <div class="btnSpan" v-if="user.applyType==2">
            <span>已拒绝</span>
          </div>
        </li>
      </ul>
    </div>

  </div>
</template>
<script>
import {circleApplyList,circleShipOper} from '@/utils/ajaxRequest.js';
export default {
  name: "",
  data: () => ({
    toFriend:[],     //我的申请的
    friendTo:[],    //申请我的列表
    headerArr:['我申请','申请我'],
    xlyd_loginInfo:'',
    idx:0,
  }),
  components: {
    headerTab:()=>import('../template/headerTab'),
    noneList:()=>import('@/components/noneList/noneList'),
  },
  methods: {
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 顶部tab切换
    tabEvent(data) {
      this.idx = data;
    },
    // 获取申请列表
    getApplyList() {
      let self = this;
      circleApplyList({token:self.xlyd_loginInfo.token}).then(res=>{
        console.log(res);
        if (res) {
          let friendlist = res.data.result;   //所有列表
          for (var i = 0; i < friendlist.length; i++) {
            if(friendlist[i].fromUserId==self.xlyd_loginInfo.id) {    //申请者的id为本人id，则我申请的
              self.toFriend.push(friendlist[i]);
            }else{
              self.friendTo.push(friendlist[i]);
            }
          }
          console.log(new Date(1534417875000))
        }
      })
    },
    // 处理好友请求（1同意，2拒绝）
    handleApply(applyid,type){
      let self = this;
      let operParam = {
        token:self.xlyd_loginInfo.token,
        applyId:applyid,
        applyType:type,      // 1:同意 2:拒绝
      }
      let txt = '';
      if(type == 1){
        txt = '同意好友申请'
      }else{
        txt = '拒绝好友申请'
      }
      self.messageBox.confirm(txt).then(action=>{
        circleShipOper(operParam).then(res=>{
          console.log(res);
          if (res) {
            self.toast(res.data.msg);
            self.$router.go(-1);    //返回上一页
          }
        })
      }).catch(error=>{
        console.log(error);
      })
    },
    // 同意好友申请
    agreeApply(applyId) {
      this.handleApply(applyId,1);
    },
    // 拒绝好友申请
    operApply(applyId) {
      this.handleApply(applyId,2);
    }
  },
  created() {
    //do something after creating vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.xlyd_loginInfo = xlyd_loginInfo;
    this.getApplyList();
  },
  mounted() {
    //do something after mounting vue instance
    let self = this;
  }
}
</script>
<style lang="scss" scoped>
.btnSpan span{
  margin-left: 10px;
  &:first-child{
    color: $redColor;
  }
  &:last-child{
    color: $blueColor;
  }
}
</style>
